<script setup lang="ts">
  import { ElDivider, ElMessageBox } from 'element-plus'
  import { h, ref } from 'vue'
  import { useGetFaultTypes, useFaltTypesDel } from '@/services/pages/know/fault'
  import FaultTypeDialog from '../type/FaultTypeDialog.vue'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { Delete, EditPen } from '@element-plus/icons-vue'

  const { faultTypes, getFaultTypesLoading, getFaultTypes } = useGetFaultTypes()
  const { faultTypesDel } = useFaltTypesDel()

  defineOptions({
    name: 'TypesKnownFaults',
  })

  const emits = defineEmits<{
    (e: 'update-list', value: string): void
  }>()

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 当前选中的分类
  const activeTypeId = ref('')

  // 是否正在编辑中
  const isEditing = ref(false)

  // 故障分类弹窗显示状态
  const faultTypeDialogVisible = ref(false)

  // 当前正在编辑的故障分类的id
  const currentEditFaultTypeId = ref('')

  /**
   * 编辑分类
   * @param {string} id - 故障分类id
   */
  const handleEdit = (id: string) => {
    currentEditFaultTypeId.value = id
    faultTypeDialogVisible.value = true
  }

  /**
   * 删除故障分类事件
   * @param {KnowFaultTypes} faultType - 故障分类对象
   */
  const handleDel = (faultType: KnowFaultTypes) => {
    ElMessageBox({
      title: '提示',
      type: 'error',
      message: `确定要删除“${faultType.name}”该分类吗？`,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (['close', 'cancel'].includes(action)) {
          done()
          return
        }

        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          const res = await faultTypesDel([faultType.id])
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (res.code === 20000) {
            HMessage.success(infoTip.know.fault.type.deleteSuccess)
            done()
            getFaultTypes()
            return
          }

          HMessageBox.error(res.message)
        }
      },
    })
  }

  const getList = (id: string) => {
    activeTypeId.value = id
    emits('update-list', id)
  }

  defineExpose({
    getFaultTypes,
  })
</script>

<template>
  <div v-loading="getFaultTypesLoading" class="types-known-faults">
    <div class="header">
      <div class="title">故障类型</div>
      <el-space :size="0" :spacer="spacer">
        <h-link v-permission="'know_faultAddType'" @click="faultTypeDialogVisible = true"
          >新增类型</h-link
        >
        <h-link v-if="!isEditing" v-permission="'know_faultEditType'" @click="isEditing = true"
          >点击编辑</h-link
        >
        <h-link v-else @click="isEditing = false">点击完成</h-link>
      </el-space>
    </div>
    <ul class="types">
      <li :class="{ item: true, 'item-active': activeTypeId === '' }" @click="getList('')">全部</li>
      <div class="content">
        <li
          v-for="(item, index) in faultTypes"
          :key="index"
          :class="{ item: true, 'item-active': activeTypeId === item.id }"
          @click="getList(item.id)"
        >
          <h-tooltip-text :text="item.name" :max-width="130" :height="16"></h-tooltip-text>
          <span v-if="isEditing" class="icon-group">
            <el-icon size="14" @click="handleEdit(item.id)">
              <EditPen />
            </el-icon>
            <el-icon size="14" @click="handleDel(item)">
              <Delete />
            </el-icon>
          </span>
        </li>
      </div>
    </ul>

    <FaultTypeDialog
      v-model:visible="faultTypeDialogVisible"
      :fault-type-id="currentEditFaultTypeId"
      @update="getFaultTypes"
    />
  </div>
</template>

<style scoped lang="scss">
  .types-known-faults {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      justify-content: space-between;
      height: 28px;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 5px;

      .btn-group {
        display: flex;
        column-gap: 5px;
      }

      .title {
        line-height: 28px;
      }
    }

    .types {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;

      .item {
        height: 32px;
        width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:hover {
          background-color: #dcedff;
        }

        .icon-group {
          display: flex;
          column-gap: 8px;
        }
      }

      .item-active {
        background-color: $primaryColor !important;
        color: #fff !important;
      }

      .content {
        overflow: auto;
        flex: 1;
        height: 0;
      }
    }
  }
</style>
